<template>
  <div class="pg-user-list">
    
    <!-- 页面搜索组件
    -------------------------- -->
    <comp-page-search
      :metaList="searchConfig"
      @searchCondChange="searchCondChange"
      module="PgUserList"></comp-page-search>

    <!-- 功能按钮区
    -------------------------- -->
    <div class="gl-page-btns">
      <el-button type="success" size="mini"
        @click.native="showDialogByToggle = !showDialogByToggle">注册新用户</el-button>
      <el-button @click.native="statusSelected('uid', '1')"
        type="primary" size="mini"
        :loading="loadingBtn === '恢复' && loadingRow === null">恢复</el-button>
      <el-button @click.native="statusSelected('uid', '0')"
        type="primary" size="mini"
        :loading="loadingBtn === '禁用' && loadingRow === null">禁用</el-button>

      <!-- 设置用户类型popover
      -------------------------- -->
      <!-- <el-popover
        class="pg-user-list__popover"
        @hide="typePopover = false"
        placement="bottom"
        title="选择用户类型"
        width="200"
        :disabled="!selectList.length || typePopover"
        trigger="click">
        <el-select v-model="shaohuo"
          @change="shaohuoTypeChange"
          :loading="!shaohuoType || !shaohuoType.length"
          placeholder="请选择">
          <el-option
            v-for="item in shaohuoType"
            :key="item.ust_id"
            :label="item.name"
            :value="item.ust_id">
          </el-option>
        </el-select>
        <el-button @click.native="typeSelected('uid')"
          type="primary" size="mini"
          slot="reference"
          :loading="loadingBtn === '设置用户类型' && loadingRow === null">设置用户类型</el-button>
      </el-popover> -->

      <!-- 设置用户提现状态popover
      -------------------------- -->
       <el-popover
        class="pg-user-list__popover"
        @hide="withdrawPopover = false"
        placement="bottom"
        title="选择提现状态"
        width="200"
        :disabled="!selectList.length || withdrawPopover"
        trigger="click">
        <el-select v-model="withdraw"
          @change="withdrawChange"
          placeholder="请选择">
          <el-option
            v-for="item in withdrawList"
            :key="item.value"
            :label="item.name"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button @click.native="withdrawSelected('uid')"
          type="primary" size="mini"
          slot="reference"
          :loading="loadingBtn === '设置用户提现状态' && loadingRow === null">设置用户提现状态</el-button>
       </el-popover>
      <!-- <el-button type="primary" size="mini">导出数据</el-button> -->
    </div>

    <!-- 数据表格
    -------------------------- -->
    <comp-page-table
      :tableConfig="tableConfig"
      :tableData="tableData"
      :loading="tableLoading"
      :total="tableTotal"
      :pageSize="Number(pageSize)"
      :pageSizes="pageSizes"
      @currentChange="tableCurrentChange"
      @sortChange="tableSortChange"
      @sizeChange="tableSizeChange"
      @selectionChange="tableSelectionChange">
      <!-- <el-table-column
        label="操作"
        width="55">
        <template slot-scope="scope">
          <el-button
            type="text" size="small"
            :loading="loadingBtn === '查看' && loadingRow === scope.$index">查看</el-button>
        </template>
      </el-table-column> -->
    </comp-page-table>

    <!-- 添加用户弹窗
    -------------------------- -->
    <add-user
      :showByToggle="showDialogByToggle"
      @dialogComplete="getTableData"></add-user>
    
  </div>
</template>

<script>
import AddUser from './add-user'
import { tableConfig, searchConfig } from './config'
import {
  listSearchMixin,
  listStatusMixin,
  listWithdrawMixin,
  listTypeMixin
} from './mixins'

import { AccountService } from 'services/Api'
import {
  ConfirmTempMixin,
  btnLoadingMixin,
  tableCoreMixin,
  tableStatusMixin
} from 'services/Public'
import { mapState } from 'vuex'

export default {
  name: 'PgUserList',
  components: { AddUser },
  mixins: [
    ConfirmTempMixin,
    btnLoadingMixin,
    tableCoreMixin,
    tableStatusMixin,
    listSearchMixin,
    listStatusMixin,
    listWithdrawMixin,
    listTypeMixin
  ],
  data () {
    return {
      tableConfig,
      searchConfig,

      showDialogByToggle: false // 弹窗开关
    }
  },
  computed: {
    ...mapState([ 'acc_id' ]),
    // 用户管理列表参数
    userListParam () {
      return {
        acc_id: this.acc_id,
        page: this.page,
        page_size: this.pageSize,
        sort_field: this.sort_field,
        sort_type: this.sort_type,
        search: this.search,
        // type: this.typeUserList,
        vip: this.vipUserList,
        status: this.statusUserList,
        is_withdraw: this.isWithdraw,
        start_time: this.startTime,
        end_time: this.endTime
      }
    }
  },
  methods: {
    // 用户管理列表
    preFetchTableData () {
      return AccountService.userList(this.userListParam)
    },
    // 表格数据处理函数
    tableDataHandler (list) {
      return list.map(item => {
        item.is_withdraw = item.is_withdraw === '0' ? '允许' : '禁用'
        return item
      })
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/views.scss";

@include b(user-list) {

  @include e(popover) {
    margin-left: 10px;
  }
  .el-button + span, span + .el-button {
    margin-left: 10px;
  }
}
</style>
